<template>
  <div>
    <div id="dynamic-component-demo">
      <div style="width: 900px">
        <el-form>
          <el-row style="display: flex">
            <el-col :span="10" style="width: 390px; border: 1px solid #ebeef5">
              <div
                style="
                  padding: 5px 15px 10px;
                  background-color: #f5f7fa;
                  border-radius: 3px;
                "
              >
                <el-form-item label="未选列表">
                  <span style="float: right">{{ listArr.length }}</span>
                  <el-table
                    :data="listArr"
                    style="width: 100%"
                    border
                    height="393"
                    @selection-change="checkAll"
                  >
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column prop="id" label="ID"></el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="age" label="年龄"></el-table-column>
                  </el-table>
                </el-form-item>
              </div>
            </el-col>
            <el-col
              :span="3"
              style="
                width: 80px;
                padding: 0 10px;
                display: flex;
                flex-direction: column;
                justify-content: center;
              "
            >
              <!--穿梭框选中-->
              <div style="display: flex; justify-content: center">
                <el-button
                  class="middle-circle"
                  icon="el-icon-arrow-right"
                  :disabled="!leftData.length"
                  size="mini"
                  type="primary"
                  @click="handelSelect"
                />
              </div>
              <!--穿梭框取消-->
              <div style="display: flex; justify-content: center">
                <el-button
                  class="middle-circle"
                  icon="el-icon-arrow-left"
                  :disabled="!rightData.length"
                  size="mini"
                  type="primary"
                  style="margin-top: 10px; margin-left: 0px"
                  @click="handleRemoveSelect"
                />
              </div>
            </el-col>
            <el-col :span="10" style="width: 390px; border: 1px solid #ebeef5">
              <div
                style="
                  padding: 5px 15px 10px;
                  background-color: #f5f7fa;
                  border-radius: 3px;
                "
              >
                <el-form-item label="已选列表">
                  <span style="float: right">{{ selectArr.length }}</span>
                  <el-table
                    :data="selectArr"
                    style="width: 100%"
                    border
                    height="393"
                    @selection-change="checkRightAll"
                  >
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column prop="id" label="ID"></el-table-column>
                    <el-table-column prop="name" label="姓名"></el-table-column>
                    <el-table-column prop="age" label="年龄"></el-table-column>
                  </el-table>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchParam: {},
      listArr: [
        { id: 1, name: "AAA", age: 1 },
        { id: 2, name: "BBB", age: 1 },
        { id: 3, name: "CCC", age: 1 },
        { id: 4, name: "DDD", age: 1 },
        { id: 5, name: "EEE", age: 1 },
        { id: 6, name: "FFF", age: 1 },
      ],
      selectArr: [],
      changeArr: [],
      leftData: [], // 左边选中列表数据
      rightData: [], // 右边选中列表数据
    };
  },
  methods: {
    checkAll(val) {
      this.leftData = val;
    },
    checkRightAll(val) {
      this.rightData = val;
    },
    // 穿梭框选中
    handelSelect() {
      for (let i = 0; i < this.selectArr.length; i++) {
        for (let j = 0; j < this.leftData.length; j++) {
          if (this.leftData[j].id === this.selectArr[i].id) {
            this.leftData = []; // 避免 左边勾选内容 leftData 与 右边内容 selectArr 重复
          }
        }
      }
      this.selectArr = this.handleConcatArr(this.selectArr, this.leftData);
      this.handleRemoveTabList(this.leftData, this.listArr);
      this.leftData = [];
    },
    // 穿梭框取消
    handleRemoveSelect() {
      this.listArr = this.handleConcatArr(this.listArr, this.rightData);
      this.handleRemoveTabList(this.rightData, this.selectArr);
      this.rightData = [];
    },
    handleConcatArr(selectArr, leftData) {
      let arr = [];
      arr = arr.concat(selectArr, leftData);
      return arr;
    },
    handleRemoveTabList(isNeedArr, originalArr) {
      if (isNeedArr.length && originalArr.length) {
        for (let i = 0; i < isNeedArr.length; i++) {
          for (let k = 0; k < originalArr.length; k++) {
            if (isNeedArr[i]["id"] === originalArr[k]["id"]) {
              originalArr.splice(k, 1);
            }
          }
        }
      }
    },
  },
};
</script>

<style>
</style>